<template>
	<view class="cc-tree" :style="{
		'--light-color': $theme.lightColor
	}">
		<view class="mm-picker__content" @click="handleOpen">
			<view :class="['mm-picker__text', disabled ? 'mm-picker__placeholder' : '']" v-if="value.length > 0">{{showText}}</view>
			<view class="mm-picker__placeholder" v-else>{{placeholder}}</view>
			<!-- #ifdef APP-PLUS -->
			<w-icon top="-4" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<w-icon top="8" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<w-icon top="0" name="arrow-down" size="28" wrap-width="50" color="lightColor" align="flex-end"></w-icon>
			<!-- #endif -->
		</view>
		<w-popup v-model="show" mode="right" width="600">
			<template #default>
				<view style="padding: 30rpx 30rpx 130rpx;">
					<w-search
						@change="inputChange"
					></w-search>
					<w-tree
						:tree-data="list"
						:show-checkbox="showCheckbox"
						:default-expand-all="defaultExpandAll"
						:check-on-click-node="checkOnClickNode"
						:node-key="valueKey" 
						ref="tree"
						highlight-current
						:props="defaultProps"
						:filter-node-method="filterNode"
						child-visible-for-filter-node
						:show-radio="showRadio"
						:check-only-leaf="showRadio"
					/>
				</view>
			</template>
			<template #button>
				<w-button-group padding="20rpx 0">
					<w-button size="medium" @click="show = false">取消</w-button>
					<w-button size="medium" type="primary" @click="finishSelect">确定</w-button>
				</w-button-group>
			</template>
		</w-popup>
	</view>
</template>

<script>
	/**
	 * 选择树弹窗
	 */
	import Emitter from '../../libs/util/emitter.js';
	export default {
		mixins: [Emitter],
		props: {
			// v-model
			value: {
				type: Array,
				default: () => []
			},
			// 二维 Array＜Object＞
			list: {
				type: Array,
				default: () => []
			},
			placeholder: {
				type: String,
				default: '请选择接收人'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			showKey: {
				type: String,
				default: 'label'
			},
			valueKey: {
				type: String,
				default: 'value'
			},
			childrenKey: {
				type: String,
				default: 'children'
			},
			// 默认展开所有节点
			defaultExpandAll: {
				type: Boolean,
				default: false
			},
			// 点击节点是否选中
			checkOnClickNode: {
				type: Boolean,
				default: false
			},
			// 是否多选
			showCheckbox: {
				type: Boolean,
				default: false
			},
			// 是否单选
			showRadio: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show: false,
				filterText: '',
				defaultProps: {
					children: this.childrenKey,
					label: this.showKey
				},
				showText: ''
			}
		},
		mounted() {
			// 初始化展示默认选中
			let checked = [];
			for (let i of this.value) {
				checked.push(this.searchLabel(i, this.list));
			}
			this.formatShowText(checked);
		},
		methods: {
			// 搜索
			inputChange(e) {
				this.$refs.tree.filter(e);
			},
			// 开启弹窗
			handleOpen() {
				if (this.disabled) return;
				this.show = true;
				this.$nextTick(() => {
					this.$refs.tree.setCheckedKeys(this.value, true);
				})
			},
			// 筛选函数
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			// 根据key查找label
			searchLabel(key, list, result = '') {
				list.some((item, index) => {
					if (item[this.valueKey] == key) {
						result = item[this.showKey];
						return true;
					} else {
						if (item[this.childrenKey]) {
							result = this.searchLabel(key, item[this.childrenKey], result);
						}
						return false;
					}
				})
				return result;
			},
			// 格式化展示的showText
			formatShowText(checked) {
				// 展示出部分选择label
				this.showText = '';
				checked.map((item, index) => {
					if (index == 0) {
						this.showText += item;
					} else {
						this.showText += `，${item}`;
					}
				})
			},
			// 完成选择
			finishSelect() {
				let checkedNodes = this.$refs.tree.getCheckedNodes(true);
				this.formatShowText(checkedNodes.map(item => item[this.showKey]));
				let checkedKeys = this.$refs.tree.getCheckedKeys(true);
				this.$emit('input', checkedKeys);
				this.$emit('change', checkedKeys);
				this.$nextTick(() => {
					this.dispatch('w-form-item', 'on-form-change', checkedKeys);
				});
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cc-tree {
		width: 100%;
		.mm-picker__content {
			display: flex;
			text-align: right;
			.mm-picker__placeholder {
				color: var(--light-color);
				flex: 1;
			}
			.mm-picker__text {
				flex: 1;
				width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-left: 30rpx;
			}
		}
	}
</style>
